<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>个人注册</title>


    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-register.css"/>
</head>

<body>
<div class="register py-container ">
    <!--head-->
    <div class="logoArea">
        <a href="" class="logo-bd"></a>
    </div>
    <!--register-->
    <div class="registerArea">
        <h3>注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
        <div class="info">
            <form class="sui-form form-horizontal" id="RegisterFormId">
                <div class="control-group">
                    <label class="control-label">用户名：</label>
                    <div class="controls">
                        <input name="username" type="text" placeholder="请输入你的用户名" class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">登录密码：</label>
                    <div class="controls">
                        <input name="password" type="password" placeholder="设置登录密码" class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">确认密码：</label>
                    <div class="controls">
                        <input name="passwordTwo" type="password" placeholder="再次确认密码" class="input-xfat input-xlarge">
                    </div><!--由于普通的鼠标移出事件可以会因为div嵌套的原因反复触发所以建议使用这个onmouseleave    onmouseleave="pwdtrueOrfalse()" -->
                </div>

                <div class="control-group">
                    <label class="control-label">手机号：</label>
                    <div class="controls">
                        <input name="phone" id="phone1" value="15188828201" type="text" placeholder="15188828201"
                               class="input-xfat input-xlarge">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">短信验证码：</label>
                    <div class="controls">
                        <input name="code" id="Code1" type="text" placeholder="短信验证码" class="input-xfat input-xlarge">
                        <a id="ShrotPht" href="javascript:generateCode()">获取短信验证码</a>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" type="checkbox" value="2" checked=""><span>同意协议并注册《东东商城用户协议》</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <input class="sui-btn btn-block btn-xlarge btn-danger" type="button" onclick="Register()"
                               value="完成注册">
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机东东商城</li>
            <li>销售联盟</li>
            <li>东东商城社区</li>
        </ul>
        <div class="address">地址：北京市昌平区沙阳路18号 邮编：100000 电话：400-0123-302</div>
        <div class="beian">京ICP备08006666号京公网安备11010888888
        </div>
    </div>
</div>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/pages/register.js"></script>

<!--引入自定义文件-->
<script src="js/pages/public.js"></script>
</body>
<script th:inline="javascript">

    //生成短信验证码
    function generateCode() {
        /*发送短信后倒计时，倒计时结束重新发送验证码*/
        var timer = 59;
        var a = setInterval(function () {
            if (timer <= 0) {
                $("#ShrotPht").html("获取短信验证码")
                clearInterval(a);/*计时结束清空*/
                return;
            }
            $("#ShrotPht").html(timer--);
        }, 1000)/*一秒钟执行一次function中的代码*/

        //---------------------------------携带手机号去后端生成验证码
        var phone = $("#phone1").val();

        if (phone == null && phone == "" && phone.length == 0) {
            alert("需要填写手机号!")
        }
        $.ajax({
            url: goods + "/user/generateCode",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            // contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {phone: phone},//JSON.stringify(register)
            success: function (result) {
                if (result.code == 11) {
                    console.log(result.data)
                    $("#Code1").val(result.data)

                }
            }, error: function () {
                alert("验证码生成失败，请联系管理员")
            }
        })
    }

    // // //鼠标移出事件  判断密码是否一致
    // function pwdtrueOrfalse() {
    //     let register = $("#RegisterFormId").serializeObject();
    //     if (register.password != register.passwordTwo) {//判断密码是否一致
    //         alert("请确认你输入的密码是否一致")
    //         return;
    //     }
    //     console.log("确认密码一致，去注册")
    //     Register();//一致就走注册方法
    // }


    function Register() {
        let register = $("#RegisterFormId").serializeObject();
        console.log(register)
        if (register.password != register.passwordTwo) {//判断密码是否一致
            alert("请确认你输入的密码是否一致")
            return;
        }
        //判断验证码是否一致
        if (register.code != $("#Code1").val()) {
            alert("请确认你的验证码是否一致")
        }
        if (register.code == null  && register.code == ""){
            alert("请输入验证码")
        }
        $.ajax({
            url: goods + "/user/register",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "post",//必须指定请求类型
            data: JSON.stringify(register),
            success: function (result) {
                if (result.code == 4) {
                    alert(result.message)//成功
                } else if (result.code == 6) {//用户存在
                    alert(result.message)
                } else if (result.code == 11) {
                    alert("注册成功")
                }
            }, error: function () {
                alert("注册异常，请联系管理员")
            }
        })
    }
</script>
</html>